import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators'
import cookies, { SIDEBAR_STATUS } from '@/libs/util.cookies'
import store from '@/store'

export interface IAppState {
  sidebar: {
    opened: boolean
  }
}

// dynamic: true: 动态创建动态模块,即new Vuex.Store({})里面不用注册的.空着就行,
// store,当前模块注册到store上.也可以写在getModule上,即getModule(PassengerStore,store)
// namespaced: true, name: 'passenger' 命名空间
@Module({ dynamic: true, store, name: 'app' })
class App extends VuexModule implements IAppState {
  // state => 要public不然外面调用不到
  public sidebar = {
    opened: cookies.get(SIDEBAR_STATUS) !== 'closed'
  }

  @Mutation
  private TOGGLE_SIDEBAR () {
    // 切换sidebar状态
    this.sidebar.opened = !this.sidebar.opened
    if (this.sidebar.opened) {
      cookies.set(SIDEBAR_STATUS, 'opened')
    } else {
      cookies.set(SIDEBAR_STATUS, 'closed')
    }
  }

  @Mutation
  private CLOSE_SIDEBAR () {
    this.sidebar.opened = false
    cookies.set(SIDEBAR_STATUS, 'closed')
  }

  // commit的两种调用方式，第一种：Action后面的括号里面添加commit,然后return的结果就是TOGGLE_SIDEBAR的参数
  // @Action({ commit: 'TOGGLE_SIDEBAR' })
  // public ToggleSiderBar() {}
  // 第二种，直接this.TOGGLE_SIDEBAR()调用
  @Action
  public ToggleSideBar () {
    // this.TOGGLE_SIDEBAR() // 直接调用
    this.context.commit('TOGGLE_SIDEBAR') // commit调用
  }

  @Action
  public CloseSideBar () {
    this.CLOSE_SIDEBAR()
  }
}
// 使用getModule: 对类型安全的访问
export const AppModule = getModule(App)
